import * as echarts from 'echarts'
import 'echarts-liquidfill'
import { useEffect, useState } from 'react'
import closePng from '../src/assets/close.png'

function App() {
  const ipcHandle = () => window.electron.ipcRenderer.send('ping')
  const [percent, setPercent] = useState(0)

  // 接收主进程发送的内存使用信息
  window.electron.ipcRenderer.on('mem-usage-info', (event, memInfo) => {
    // 将内存信息转换为 MB 单位并显示在页面上
    const totalMemMB = Math.round(memInfo.totalMem / 1024 / 1024)
    const freeMemMB = Math.round(memInfo.freeMem / 1024 / 1024)
    const usedMemMB = Math.round(memInfo.usedMem / 1024 / 1024)
    setPercent(usedMemMB / totalMemMB)
    // document.getElementById('mem-info').textContent =
    //   `总内存: ${totalMemMB} MB, 空闲内存: ${freeMemMB} MB, 已用内存: ${usedMemMB} MB`
  })

  useEffect(() => {
    const chart = echarts.init(document.getElementById('chart_container'))

    document.getElementById('close_btn').addEventListener('click', () => {
      window.electron.ipcRenderer.send('close-window')
    })
    chart.setOption({
      series: [
        {
          type: 'liquidFill',
          data: [percent, percent - 0.2, percent - 0.4],
          radius: '90%',
          label: {
            fontSize: 18
          }
        }
      ]
    })
  }, [percent])

  return (
    <div
      className="container"
      style={{
        backgroundColor: 'rgba(0,0,0,0)',
        width: '150px',
        height: '170px',
        overflow: 'hidden'
      }}
    >
      <div
        style={{
          height: '20px',
          width: '150px',
          zIndex: '100'
        }}
      >
        <img style={{ float: 'right', cursor: 'pointer' }} src={closePng} id="close_btn"></img>
      </div>

      <div style={{ width: '150px', height: '150px', zIndex: 1 }} id="chart_container"></div>
    </div>
  )
}

export default App
